<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息管理系统 - 登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <!-- 引入字体图标（可选，增强美观） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 登录页专属样式 */
        .login-body {
            background: linear-gradient(135deg, #4361ee, #7209b7, #f72585);
            background-size: 200% 200%;
            animation: gradientAnimation 15s ease infinite;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .login-card::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
            animation: float 8s linear infinite;
        }

        @keyframes float {
            0% { transform: rotate(30deg) translate(0, 0); }
            100% { transform: rotate(30deg) translate(100px, -100px); }
        }

        .login-logo {
            font-size: 48px;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .login-title {
            font-size: 24px;
            color: var(--gray-900);
            margin-bottom: 30px;
            font-weight: 600;
        }

        .login-footer {
            margin-top: 24px;
            font-size: 13px;
            color: var(--gray-700);
        }

        .form-control.login-input {
            padding-left: 48px;
        }

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-500);
        }
    </style>
</head>
<body class="login-body">
<div class="card login-card">
    <div class="login-logo">
        <i class="fa fa-users"></i>
    </div>
    <h2 class="login-title">员工信息管理系统</h2>

    <%-- 错误提示 --%>
    <% if (request.getAttribute("errorMsg") != null) { %>
    <div class="alert alert-danger">
        <i class="fa fa-exclamation-circle"></i> <%= request.getAttribute("errorMsg") %>
    </div>
    <% } %>

    <form action="${pageContext.request.contextPath}/LoginServlet" method="post">
        <div class="form-group input-icon">
            <i class="fa fa-user"></i>
            <input type="text" class="form-control login-input" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group input-icon">
            <i class="fa fa-lock"></i>
            <input type="password" class="form-control login-input" name="password" placeholder="请输入密码" required>
        </div>
        <button type="submit" class="btn btn-primary w-100">
            <i class="fa fa-sign-in"></i> 登录
        </button>
    </form>

    <div class="login-footer">
        <p>测试账号：admin / admin123 | manager / manager123</p>
    </div>
</div>
</body>
</html>